<template>
	<div>
		<el-container>
			<!-- <el-header>Header</el-header> -->
			<el-container>
				<!-- 左边栏-->
				<el-aside width="200px" style="background-color: rgb(238, 241, 246)" >
					<el-menu :default-openeds="['1', '2', '3']">
						<el-submenu index="1">
							<template slot="title"><i class="el-icon-message"></i>食物榜单</template>
							<el-menu-item-group>
								<el-menu-item index="1-1">
									<router-link to="/hotFood" tag="span">热门</router-link>
								</el-menu-item>
								<el-menu-item index="1-2">
									<router-link to="/fatReductionFood" tag="span">减脂</router-link>
								</el-menu-item>
								<el-menu-item index="1-3">
									<router-link to="/buildMusclesFood" tag="span">增肌</router-link>
								</el-menu-item>
								<el-menu-item index="1-4">
									<router-link to="/goutFood" tag="span">痛风</router-link>
								</el-menu-item>
							</el-menu-item-group>
						</el-submenu>
						<el-submenu index="2">
							<template slot="title"><i class="el-icon-menu"></i>食谱排行</template>
							<el-menu-item-group>
								<el-menu-item index="2-1">
									<router-link to="/fatReductionSystemCookbook" tag="span">流行减肥</router-link>
								</el-menu-item>
								<el-menu-item index="2-2">
									<router-link to="/healthClassicalSystemCookbook" tag="span">健康经典</router-link>
								</el-menu-item>
								<el-menu-item index="2-3">
									<router-link to="/systemCookbookRecommendation" tag="span">个性化推荐</router-link>
								</el-menu-item>
							</el-menu-item-group>
						</el-submenu>
						<el-submenu index="3">
							<template slot="title"><i class="el-icon-setting"></i>个人食谱</template>
							<el-menu-item-group>
								<el-menu-item index="3-1">
									<router-link to="/userCookbookShow" tag="span">我的食谱展示</router-link>
								</el-menu-item>
								<el-menu-item index="3-2">
									<router-link to="/userCookbookMake" tag="span">自定义食谱</router-link>
								</el-menu-item>
							</el-menu-item-group>
						</el-submenu>
					</el-menu>
				</el-aside>
				
				<!-- 主内容展示 -->
				<el-main>
					<router-view></router-view>
				</el-main>
			</el-container>
		</el-container>
	</div>

</template>

<script>
</script>

<style>
	.el-header,
	.el-footer {
		background-color: #B3C0D1;
		color: #333;
		text-align: center;
		line-height: 60px;
	}

	.el-aside {
		background-color: #D3DCE6;
		color: #333;
		text-align: center;
		line-height: 200px;
	}

	.el-main {
		background-color: #E9EEF3;
		color: #333;
		text-align: center;
		line-height: 160px;
	}

	body>.el-container {
		margin-bottom: 40px;
	}

	.el-container:nth-child(5) .el-aside,
	.el-container:nth-child(6) .el-aside {
		line-height: 260px;
	}

	.el-container:nth-child(7) .el-aside {
		line-height: 320px;
	}
</style>
